<template>
    <div class="headerImg">
        <div class="leftPart">
            <div><span class="date-day"> {{ dateDay }}</span></div>
            <span class="date-year"> {{ dateYear }}</span>
            <span class="date-year"> {{ dateWeek }}</span>
        </div>
        <div class="contentPart">风险总视图</div>
        <div class="rightPart">
            <div class="rightOne">
                <div class="selectStyle">
                    <el-select @change="changeDataType" v-model="searchForm.dataType" placeholder=""
                        popper-class='dpDatePop' :popper-append-to-body="false">
                        <el-option value="smsj" label="扫描数据"></el-option>
                        <el-option value="pdsj" label="派单数据"></el-option>
                    </el-select>
                </div>
                <div class="periodStyle">
                    <el-date-picker :append-to-body='false' ref="datePickerRef"
                        :style="{ zIndex: isFullFlag ? 9999 : 'auto' }" v-if="showDatePicker"
                        v-model="searchForm.period" type="month" format="yyyy-MM" value-format="yyyyMM"
                        @change="changeDate()" :clearable="false" popper-class='dpDatePop'>
                    </el-date-picker>
                </div>
            </div>
            <div>
                <img src="~@/views/riskBigScreen/bigScreen/quanping.png" alt="Image"
                    style="vertical-align: middle; width: 1.6vw;height:1.6vw" @click="clickFun1"
                    :title="isFullFlag ? '退出全屏' : '全屏'">
            </div>
        </div>
    </div>
</template>

<script>
export default {
    components: {},
    data() {
        return {
            isFullFlag: false,

            searchForm: {
                dataType: 'smsj',
                period: '',
            },
            timing: null,
            loading: true,
            dateDay: null,
            dateYear: null,
            dateWeek: null,
            weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
            showDatePicker: true, // 修改：添加控制日期选择器渲染的数据属性

        };
    },
    computed: {},
    watch: {},
    created() {
        this.timeFn()
    },
    mounted() {
        this.searchForm.period = this.$moment().subtract(1, 'months').format("YYYYMM")
        this.changeDate()
        this.clickFun1()
    },
    methods: {
        timeFn() {
            this.timing = setInterval(() => {
                this.dateDay = this.$moment(new Date()).format("HH:mm:ss");
                this.dateYear = this.$moment(new Date()).format("YYYY-MM-DD");
                this.dateWeek = this.weekday[new Date().getDay()]
            }, 1000)
        },
        changeDataType() {
            this.$emit('changeDataType', this.searchForm.dataType)
        },
        changeDate() {
            this.$emit('changeDate', this.searchForm.period)
        },
        clickFun1(val) {
            this.isFullFlag = !this.isFullFlag;
            this.$emit('changeFullFlag', this.isFullFlag)
            const element = document.getElementById('screenDemo');
            if (this.isFullFlag) {
                element.requestFullscreen().then(() => {
                    this.showDatePicker = false; // 修改：先隐藏组件
                    this.$nextTick(() => {
                        this.showDatePicker = true; // 修改：然后重新显示组件以触发重新渲染
                        //  this.$refs.echartsMap.initUserDetail()
                        // this.$refs.datePickerRef.focus(); // 尝试聚焦
                    });
                });
            } else {
                document.exitFullscreen().then(() => {
                    this.showDatePicker = false; // 修改：先隐藏组件
                    this.$nextTick(() => {
                        this.showDatePicker = true; // 修改：然后重新显示组件以触发重新渲染
                        //  this.$refs.echartsMap.initUserDetail()
                        // this.$refs.datePickerRef.focus(); // 尝试聚焦
                    });

                });
            }
        },
    },
    beforeDestroy() { },
    activated() { },
}
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类

.hostBodyHalf {
    .contentPart {
        font-size: 1.6vw !important;
    }

    .leftPart {
        padding-top: 1vh !important;
    }
}

.headerImg {
    background: url('~@/views/riskBigScreen/bigScreen/headerPg.png') 0 0 no-repeat;
    background-size: 100% 120%;
    height: 8vh;
    display: flex;
    justify-content: space-between;
}

.leftPart {
    width: 30%;
    padding-top: 2vh;

    .date-day {
        color: #ffffff;
        text-align: right;
        font-family: "TCloudNumber";
        font-size: 1.25vw;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        letter-spacing: 0.125vw;
    }

    .date-year {
        color: #ffffff80;
        text-align: right;
        font-family: "TCloudNumber";
        font-size: 0.8333vw;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        letter-spacing: 0.0833vw;
    }
}

.contentPart {
    margin: 0 auto;
    width: 40%;
    text-align: center;
    background-size: contain;
    background-repeat: no-repeat;

    padding-top: 1vh;
    text-shadow: 0 0.1vw 1vw #0049ca61;
    font-family: "Alimama ShuHeiTi";
    font-size: 2.1vw;
    font-weight: 700;
    line-height: 4vh;
    letter-spacing: 0.5vw;
    background: linear-gradient(180deg, #FFF 50%, #5BAFFF 84.86%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.rightPart {
    display: flex;
    align-items: center;
    justify-content: end;
    width: 30%;

    .rightOne {
        width: 22vw;
        padding-right: 2%;
        display: flex;
        align-items: center
    }
}



.selectStyle {
    width: 10vw;
    padding-right: 10px;
    height: 3.6vh;
    background-size: 100% 100%;
    /* 确保图片覆盖整个容器 */
    background-repeat: no-repeat;
    /* 防止图片重复 */
    background-image: url('~@/views/riskBigScreen/bigScreen/smallTitleBg.png');

    .el-select__caret {
        color: #4885ff;
    }
}

.periodStyle {
    display: inline-block;
    justify-content: center;
    width: 10vw;
    height: 3.6vh;
    background-size: 100% 100%;
    /* 确保图片覆盖整个容器 */
    background-repeat: no-repeat;
    /* 防止图片重复 */
    background-image: url('~@/views/riskBigScreen/bigScreen/smallTitleBg.png');

    /* 替换为你的图片路径 */
    .el-date-editor {
        width: 100%;
    }

}




::v-deep .el-input--medium .el-input__inner {
    background-color: transparent;
    border: 0.0vw;
}

::v-deep .el-input--medium .el-input__inner {
    // width: 10vw;
    height: 3.6vh;
    color: #ffffff;
    font-family: "PingFang SC";
    font-size: 1vw;
    font-style: normal;
    font-weight: 500;
    line-height: 1vw;
}



::v-deep .el-input--medium .el-input__icon {
    line-height: 3.6vh;
}
</style>